<template>
	<div class="page">
		<div class="movie-image">
			<div class="m_coverpicbox">
				<div class="img_box">
					<a href="#" :title="movie.name">
						<img class="image" :src="movie.bigImage" :alt="movie.name">
					</a>
				</div>
			</div>
		</div>
		<div class="movie-info">
			<div class="title_box">
				<div class="movie-title">{{movie.name}}（{{movie.movieYear}}）</div>
				<div class="movie-etitle">{{movie.nameEn}}</div>
				<div class="movie-memo">{{movie.length}}分钟 - {{changeYear(movie.movieYear,movie.moviePublishDate)}}
				</div>
			</div>
			<div class="movie-stastic">
				<div class="stastic-item">
					<div class="number">{{movie.personCount}}</div>
					<div class="label">位演职员</div>
				</div>

				<div class="stastic-item">
					<div class="number">24</div>
					<div class="label">次电影节提名</div>
				</div>

				<div class="stastic-item">
					<div class="number">3248</div>
					<div class="label">评论</div>
				</div>
			</div>

			<div class="movie-ratings">
				<div class="movie-grade">
					<div class="grade-number">{{movie.rating}}</div>
					<div class="grade-text">总分10分</div>
					<div class="grade-text" style="padding-top: 10px;">{{movie.ratingCount}}人评分</div>
					<div class="grade-text">2.3万人想看</div>
				</div>

				<div class="movie-ratings-row">
					<div class="label">分项评分</div>
					<div class="rating-item">
						<div class="item-label">音乐</div>
						<div class="item-block value1"></div>
						<div class="item-block value2"></div>
						<div class="item-block value3"></div>
						<div class="item-block value4"></div>
						<div class="item-block value5"></div>
						<div class="item-block value6"></div>
						<div class="item-block value7"></div>
						<div class="item-block value8"></div>
						<div class="item-block value9"></div>
						<div class="item-block value10"></div>
						<div class="item-label">9.4分</div>
					</div>
					<div class="rating-item">
						<div class="item-label">画面</div>
						<div class="item-block value1"></div>
						<div class="item-block value2"></div>
						<div class="item-block value3"></div>
						<div class="item-block value4"></div>
						<div class="item-block value5"></div>
						<div class="item-block value6"></div>
						<div class="item-block value7"></div>
						<div class="item-block value8"></div>
						<div class="item-block value9"></div>
						<div class="item-block value10"></div>
						<div class="item-label">9.2分</div>
					</div>
					<div class="rating-item">
						<div class="item-label">导演</div>
						<div class="item-block value1"></div>
						<div class="item-block value2"></div>
						<div class="item-block value3"></div>
						<div class="item-block value4"></div>
						<div class="item-block value5"></div>
						<div class="item-block value6"></div>
						<div class="item-block value7"></div>
						<div class="item-block value8"></div>
						<div class="item-block value9"></div>
						<div class="item-block value10"></div>
						<div class="item-label">9.1分</div>
					</div>
					<div class="rating-item">
						<div class="item-label">故事</div>
						<div class="item-block value1"></div>
						<div class="item-block value2"></div>
						<div class="item-block value3"></div>
						<div class="item-block value4"></div>
						<div class="item-block value5"></div>
						<div class="item-block value6"></div>
						<div class="item-block value7"></div>
						<div class="item-block value8"></div>
						<div class="item-block value9"></div>
						<div class="item-block value10"></div>
						<div class="item-label">8.8分</div>
					</div>
					<div class="rating-item">
						<div class="item-label">表演</div>
						<div class="item-block value1"></div>
						<div class="item-block value2"></div>
						<div class="item-block value3"></div>
						<div class="item-block value4"></div>
						<div class="item-block value5"></div>
						<div class="item-block value6"></div>
						<div class="item-block value7"></div>
						<div class="item-block value8"></div>
						<div class="item-block value9"></div>
						<div class="item-block value10"></div>
						<div class="item-label">8.9分</div>
					</div>
				</div>
			</div>

			<div class="movie-info-bottom">
				<div class="movie-info-left">
					<div class="info-row">
						<div class="info-row-label">导演：</div>
						<div class="info-row-text" style="color: #08c; cursor: pointer;">
						{{movie.directorInfo.name}}
						</div>
					</div>
					<div class="info-row">
						<div class="info-row-label">编剧：</div>
						<div class="info-row-text" style="color: #08c; cursor: pointer;">
							{{changeWriters(movie.writerInfos)}}</div>
					</div>
					<div class="info-row">
						<div class="info-row-label">国家地区：</div>
						<div class="info-row-text" style="color: #08c; cursor: pointer;">美国</div>
					</div>
					<div class="info-row">
						<div class="info-row-label">发行公司：</div>
						<div class="info-row-text" style="color: #08c; cursor: pointer;">
							{{changeCompanyInfo(movie.companyInfos)}}
						</div>
					</div>
					<div class="info-row">
						<div class="info-row-label">更多片名：</div>
						<div class="info-row-text">{{movie.titleOthers}}</div>
					</div>
					<div class="info-row-plot" id="plot">
						<div class="plotLabel" id="plotLabel">剧情：</div>
						<div class="Introduction" id="Introduction">
							{{movie.story}}
						</div>
					</div>
				</div>

				<div class="movie-info-actors">
					<div class="label">主演：</div>
					<div class="actor-item" v-for="actor in actors" :key="actor.actorId">
						<div class="actor-image">
							<img class="actor-img" :src="actor.img" />
						</div>
						<div class="actor-name">{{actor.name}}</div>
						<div class="actor-Enname">{{actor.nameEn}}</div>
		
					</div>
	
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				movieId: '',
				movie: {},
				moviePublishDate: '',
				actors:[]
			}
		},
		methods: {
			changeYear(movieYear, moviePublishDate) {
				console.log(movieYear, moviePublishDate)
				let movieYearUpdate = moviePublishDate.substring(4);
				console.log(movieYearUpdate)
				console.log('月', movieYearUpdate.substring(0, 1))
				console.log('日', movieYearUpdate.substring(2, 3))
				if (movieYearUpdate.substring(0, 1) != 0 && movieYearUpdate.substring(2, 3) != 0) {
					movieYearUpdate = `${movieYear}年${movieYearUpdate.substring(0,2)}月${movieYearUpdate.substring(2)}日`
				} else if (movieYearUpdate.substring(0, 1) == 0 && movieYearUpdate.substring(2, 3) == 0) {
					movieYearUpdate = `${movieYear}年${movieYearUpdate.substring(1,2)}月${movieYearUpdate.substring(3,4)}日`
				} else if (movieYearUpdate.substring(0, 1) == 0 && movieYearUpdate.substring(2, 3) != 0) {
					movieYearUpdate = `${movieYear}年${movieYearUpdate.substring(1,2)}月${movieYearUpdate.substring(2)}日`
				} else if (movieYearUpdate.substring(0, 1) != 0 && movieYearUpdate.substring(2, 3) == 0) {
					movieYearUpdate = `${movieYear}年${movieYearUpdate.substring(0,2)}月${movieYearUpdate.substring(3,4)}日`
				}

				console.log(movieYearUpdate)
				return this.moviePublishDate = movieYearUpdate
			},
			changeWriters(writersItem) {
				console.log(writersItem)
				let writers=[];
				writersItem.forEach(item=>{
					if(item.name!=''){
						writers.push(item.name)
					}
				})
				console.log(writers)
				if(writers.length==1){
					return writers[0];
				}
				else if(writers.length>=2){
					return writers[0]+','+writers[1]
				}
			},
			changeCompanyInfo(companysItem) {
				console.log(companysItem)
				let companys=[];
				companysItem.forEach(item=>{
					if(item.name!=''){
						companys.push(item.name)
					}
					else if(item.nameEn!=''){
						companys.push(item.nameEn)
					}
				})
				console.log(companys)
				if(companys.length==1){
					return companys[0];
				}
				else if(companys.length>=2){
					return companys[0]+','+companys[1]
				}
			}
	},
	mounted() {
		var Params = this.$route.query;
		this.movieId = Params.id;
        console.log(this.movieId)
		this.$http.request({
				url: 'http://118.25.42.197:9930/api/movies/detail/' + this.movieId,
				method: 'get'
			})
			.then(response => {
				if (response.status == 200) {
					this.movie = response.data;
					this.$http.request({
						url:'http://118.25.42.197:9930/api/movies/actors/'+this.movieId,
						method:'get'
					})
					.then(response=>{
						if(response.status == 200){
							let actorsItem=response.data;
							console.log('actorsItem',actorsItem)
							actorsItem.forEach(item=>{
								if(item.name!='' && item.nameEn!='' && item.img!=''){
									this.actors.push(item)
								}
							})
							console.log(this.actors)
							return this.actors;
						}
					})
					.catch(err=>{
							console.log('获取演员列表错误!--其他错误',err)
					})
				}
				console.log('movie',this.movie)
				console.log('actors',this.actors)
			})
			.catch(err => {
				console.log('获取影片详情失败!',err)
			})
	}
	}
</script>

<style scoped="scoped">
	body {
		background-color: #0087E2;
		padding: 0;
		margin: 0;
	}

	.page {
		display: flex;
		position: relative;
		z-index: 1;
		background: #ffffff;
		margin-left: 9.1875rem;
		margin-right: 9.1875rem;
		margin-top: 95px;
		padding-bottom: 20px;
	}

	.movie-image {
		float: left;
		position: relative;
		margin: 30px 0 30px 30px;
		background: #ffffff;
	}

	.movie-info {
		position: relative;
		background: #ffffff;

	}

	.m_coverpicbox {
		background: #f9f9fa;
		border: 1px solid #d5d5d5;
		border-radius: 10px;
		box-shadow: 0 0 10px #999;
		padding: 10px;
		width: 300px;
		min-height: 300px;
		position: relative;
		z-index: 1
	}

	.img_box {
		background: #000;
		text-align: center;
		zoom: 1;
		width: 100%;
		min-height: 275px;
		border-radius: 6px;
		border: 1px solid #000;
		overflow: hidden;
		position: relative;
	}

	.img_box .image {
		width: 100%;
		height: auto;
		min-height: 275px;
		display: block;
	}

	.title_box {
		padding: 30px 0 24px 30px;
	}

	.movie-title {
		font-size: 35px;
		line-height: 1.3em;
		font-weight: 700;

	}

	.movie-etitle {
		font-size: 25px;
		line-height: 26px;
		margin-top: 8px;
	}

	.movie-memo {
		background: #444;
		display: inline-block;
		color: #fff;
		font-size: 16px;
		line-height: 26px;
		margin-top: 15px;
		padding: 0 10px;
		border-radius: 5px;
		position: relative;
		zoom: 1;
	}

	.movie-stastic {
		background: #127bab;
		height: 46px;
		padding-left: 12px;
		position: relative;
		zoom: 1;
		box-shadow: 0 1px 3px #dbdcdf;
		display: flex;
		justify-content: space-around;
	}

	.stastic-item {
		display: flex;
		align-items: center;
		text-align: -webkit-match-parent;
		color: #fff;
		height: 46px;
		padding-left: 15px;
		padding-right: 15px;
		cursor: pointer;
		transition: border-color .3s, background-color .3s, color .3s;

	}

	.stastic-item:hover {
		background-color: #004c7f !important;
		color: #fff !important;
		border: none;
		position: relative;

	}

	.stastic-item .number {
		font-size: 20px;
		margin-right: 5px;
	}

	.movie-ratings {
		display: flex;
		padding: 10px 0 8px 20px;
		background: #e8e9ee;
		position: relative;

	}

	.movie-grade {
		background: #287bab;
		width: 110px;
		height: 180px;
		color: #fff;
		text-align: center;
		font-size: 12px;
		border-radius: 6px;
	}

	.grade-number {
		padding-bottom: 5px;
		margin: 30px auto 5px;
		text-align: left;
		font-size: 45px;
		line-height: 1.2em;
		letter-spacing: 0;
		position: relative;
		zoom: 1;
		display: inline-block;
	}

	.movie-ratings-row {
		float: left;
		padding: 16px 10px;
		background-color: #fff;
		border-radius: 6px;
		margin-left: 10px;
		height: 180px;
		box-sizing: border-box;
		min-width: 259px;
	}

	.rating-item {
		display: flex;
		margin-bottom: 5px;
	}

	.movie-ratings-row .label {
		position: relative;
		font-weight: 700;
		font-size: 12px;
		color: #4e5e73;
		margin-bottom: 15px;
	}

	.item-label {
		font-size: 12px;
		margin: 0 5px;
	}

	.item-block {
		width: 15px;
		height: 21px;
		border-radius: 2px;
		margin-right: 3px;
		background-color: #f2f3f6;
	}

	.item-block.value1 {
		background-color: #ffe11a;
	}

	.item-block.value2 {
		background-color: #ffe11a;
	}

	.item-block.value3 {
		background-color: #ffdc1b;
	}

	.item-block.value4 {
		background-color: #ffd71e;
	}

	.item-block.value5 {
		background-color: #fed21f;
	}

	.item-block.value6 {
		background-color: #fecd20;
	}

	.item-block.value7 {
		background-color: #ffcb22;
	}

	.item-block.value8 {
		background-color: #feb928;
	}

	.item-block.value9 {
		background-color: #feb329;
	}

	.item-block.value10 {
		background-color: #ffaa00;
	}

	.movie-info-bottom {
		display: flex;
		padding: 30px 0 0 30px;
	}

	.movie-info-left {
		float: left;
		width: 482px;
		margin-left: 6px;
	}

	.info-row {
		display: flex;
		border-bottom: 1px dotted #999;
		position: relative;
		zoom: 1;
		padding: 9px 0 9px 95px;
		height: 38px;
		line-height: 1.5em;
		font-size: 13px;
		flex-direction: column;
		justify-content: center;
	}

	.info-row-label {
		position: absolute;
		left: 0;
		top: 18px;
		width: 95px;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.5em;
	}

	#plot {
		zoom: 1;
		padding: 9px 0 px 95px;
		display: flex;
		position: relative;
		display: flex;
		border-bottom: 1px dotted #999;
		flex-direction: column;
		justify-content: flex-start;
	}

	#plotLabel {
		margin-top: 10px;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.5em;
	}

	#Introduction {
		margin-top: 5px;
		position: relative;
		font-size: 14px;
		text-indent: 2em;
		line-height: 180%;
		margin-bottom: 15px;
	}

	.movie-info-actors {
		float: left;
		width: 335px;
		margin-left: 30px;
	}

	.movie-info-actors .label {
		font-size: 14px;
		font-weight: 700;
		padding-top: 8px;
	}

	.actor-item {
		padding: 0 10px;
		float: left;
		margin-top: 15px;
		margin-bottom: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 90px;
		height: 100px;
	}

	.actor-item .actor-name {
		position: relative;
		color: #08c;
		font-size: 12px;
		margin-bottom: 5px;
		cursor: pointer;
	}

	.actor-item .actor-Enname {
		position: relative;
		color: #08c;
		font-size: 12px;
		margin-bottom: 5px;
		cursor: pointer;
	}

	.actor-role {
		font-size: 12px;
		margin-bottom: 10px;
	}

	.author {
		width: 100%;
		text-align: center;
		color: #898989;
		font-size: 80%;
	}
	
	.actor-item .actor-image{
		position: relative;
		width: 50px;
		height: 50px;
	}
	
	.actor-image .actor-img{
		position: relative;
		width: 100%;
		height: 100%;
	}
</style>
